<template>
  <swiper
    class="swiper-style"
    previous-margin="80rpx"
    next-margin="80rpx"
    :circular="false"
    :indicator-dots="!!(list?.length && list.length > 1)"
    indicator-active-color="#2878FF"
    @change="handleSwiperChange"
  >
    <template v-for="(item, index) in list" :key="index">
      <swiper-item>
        <view class="wxshare-item px-10 pt-10 br-4">
          <view class="disFlxAC mb-8">
            <TImage :src="globalConfig?.logo" width="40rpx" height="40rpx" />
            <text class="ml-4 fz-12">{{ globalConfig?.name }}</text>
          </view>
          <view class="ov-2 mb-8 fz-16">
            <text>{{ item?.title }}</text>
          </view>
          <view class="imgpath-view mb-8">
            <TImage :src="item?.imageUrl" width="100%" height="100%" />
          </view>
          <view class="hem-view disFlxAC py-4">
            <text class="ali-icon fz-12">&#xe6bc;</text>
            <text class="fz-10 ml-4">小程序</text>
          </view>
        </view>
      </swiper-item>
    </template>
  </swiper>
  <view class="disFlxCC mt-24">
    <TButton
      text="立即分享"
      type="primary"
      class="gutter-btn"
      open-type="share"
      :id="ShareButtonId.CUSTOMSHARE_BUTTON_ID"
      :icon="'\ue6b9'"
      :custom-style="{
        display: 'inline-block',
      }"
      custom-class="h-32 linh-32 br-16 px-12"
    />
  </view>
</template>

<script setup lang="ts">
  import { useAppStore } from '@/store/modules/app';
  import TImage from '@/components/TImage/index.vue';
  import type { PropType } from 'vue';
  import type { ReturnWxShareOptions } from '../types';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { propTypes } from '@/utils/propTypes';
  import { ShareButtonId } from '@/enums/shareEnum';

  const { globalConfig } = useAppStore();

  defineProps({
    modelValue: propTypes.number.def(0),
    list: Array as PropType<Array<ReturnWxShareOptions>>,
  });

  const emits = defineEmits(['update:modelValue']);

  function handleSwiperChange(e: { detail: { current: number } }) {
    emits('update:modelValue', e.detail.current);
  }
</script>

<style lang="scss" scoped>
  .swiper-style {
    height: 700rpx;
    margin-top: -100rpx;
    .wxshare-item {
      background-color: #fff;
      color: #333;
      width: 480rpx;
      margin: 0 auto;
      .imgpath-view {
        width: 480rpx;
        height: 384rpx;
      }
      .hem-view {
        color: #646566;
        border-top: 1px solid #ebedf0;
        .ali-icon {
          color: #2878ff;
        }
      }
    }
  }
</style>
